import { Instagram, Facebook, Send } from 'lucide-react';
import { Link } from 'react-router-dom';

// Custom X (Twitter) icon component
const XIcon = ({ size = 20, className = "" }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="currentColor"
    className={className}
    aria-hidden="true"
  >
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  </svg>
);
export function Footer() {
  return <footer className="w-full bg-[#f3f0eb] py-16 px-4 md:px-8 lg:px-12 border-t border-[#e8e5e0]">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
        <div>
          <h3 className="font-serif text-xl mb-4 text-[#4a6b60]">RitualGlow</h3>
          <p className="text-sm leading-relaxed mb-6">
            Helping women discover self-care rituals that bring out their inner
            and outer glow.
          </p>
          <div className="flex space-x-4">
            <a href="#" aria-label="Instagram" className="text-[#4a4a4a] hover:text-[#4a6b60]">
              <Instagram size={20} />
            </a>
            <a href="#" aria-label="X (formerly Twitter)" className="text-[#4a4a4a] hover:text-[#4a6b60]">
              <XIcon size={20} />
            </a>
            <a href="#" aria-label="Facebook" className="text-[#4a4a4a] hover:text-[#4a6b60]">
              <Facebook size={20} />
            </a>
          </div>
        </div>
        <div>
          <h4 className="font-medium text-sm uppercase tracking-wider mb-4">
            Explore
          </h4>
          <ul className="space-y-2">
            <li>
              <Link to="/skincare" className="text-sm hover:text-[#4a6b60]">
                Skincare
              </Link>
            </li>
            <li>
              <Link to="/makeup" className="text-sm hover:text-[#4a6b60]">
                Makeup
              </Link>
            </li>
            <li>
              <Link to="/wellness" className="text-sm hover:text-[#4a6b60]">
                Wellness
              </Link>
            </li>
            <li>
              <Link to="/the-ritual" className="text-sm hover:text-[#4a6b60]">
                The Ritual
              </Link>
            </li>
          </ul>
        </div>
        <div>
          <h4 className="font-medium text-sm uppercase tracking-wider mb-4">
            About
          </h4>
          <ul className="space-y-2">
            <li>
              <Link to="/about/our-story" className="text-sm hover:text-[#4a6b60]">
                Our Story
              </Link>
            </li>
            <li>
              <Link to="/about/our-values" className="text-sm hover:text-[#4a6b60]">
                Our Values
              </Link>
            </li>
            <li>
              <Link to="/about/contact" className="text-sm hover:text-[#4a6b60]">
                Contact Us
              </Link>
            </li>
            <li>
              <Link to="/about/privacy-policy" className="text-sm hover:text-[#4a6b60]">
                Privacy Policy
              </Link>
            </li>
          </ul>
        </div>
        <div>
          <h4 className="font-medium text-sm uppercase tracking-wider mb-4">
            Join Our Community
          </h4>
          <p className="text-sm mb-4">
            Subscribe for exclusive wellness recipes and ritual ideas.
          </p>
          <div className="flex">
            <input type="email" placeholder="Your email" className="bg-white px-3 py-2 text-sm rounded-l-md border-[#e8e5e0] border focus:outline-none focus:border-[#4a6b60] flex-grow" />
            <button className="bg-[#4a6b60] text-white px-3 py-2 rounded-r-md hover:bg-[#3d5a50] transition-colors" aria-label="Subscribe">
              <Send size={16} />
            </button>
          </div>
          <p className="text-xs mt-6 text-[#888888]">
            This site contains affiliate links. We may receive a commission for
            purchases made through these links.
          </p>
        </div>
      </div>
      
      {/* Copyright and Legal Notice */}
      <div className="max-w-7xl mx-auto pt-8 mt-8 border-t border-[#e8e5e0]">
        <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <p className="text-xs text-[#888888]">
            © {new Date().getFullYear()} RitualGlow. All rights reserved.
          </p>
        </div>
      </div>
    </footer>;
}